<template>
  <!--模态窗 单行-->
  <transition
    name="custom-classes-transition"
    enter-active-class="animated fadeInDown"
    leave-active-class="animated fadeOutUp"
  >
    <div class="modal-ctrl-body" v-show="roleSetUser.isShow" v-if="roleSetUser">
      <div class="modal-ctrl-main even-row-ctrl">
        <div class="modal-title">
          <p>角色关联用户</p>
        </div>
        <div class="modal-ctrl-content">
          <div class="even-row">
              <div class="tree-ctrl-body">
                <!--部门树-->
                <div class="tree-table-ctrl">
                  <div id="tree-roleSetUser"  class="ztree"></div>
                </div>
                <!--用户列表-->
                <div class="tree-table-ctrl">
                  <div class="table-ctrl-body">
                    <div class="table-ctrl">

                      <!-- 表格头 -->
                      <div class="table-header">
                        <table class="table-default">
                          <thead>
                            <tr>
                              <th
                                v-for="(item,index) in treeTable.tHeader"
                                :key="index">
                                {{item.value}}
                              </th>
                            </tr>
                          </thead>
                        </table>
                      </div>

                      <!--表格列表-->
                      <div class="table-overflowX">
                        <table class="table-default">
                          <tbody>
                          <tr
                            v-for="(trs,index) in treeTableRow.data"
                            :key="index">
                            <td v-for="(tds,index) in treeTable.tHeader" v-if="tds.key === 'isChecked'" :key="index" title="是否关联">
                              <input type="checkbox" @change="selectUser(trs)" :checked="trs[tds.key]">
                            </td>
                            <td v-for="(tds,index) in treeTable.tHeader" v-if="tds.key !== 'isChecked'" :key="index" :title="trs[tds.key]">
                              {{ [trs,tds.key] | userTranslation }}
                            </td>
                          </tr>
                          </tbody>
                        </table>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
          </div>
        </div>
        <!--分页功能-->
        <Pages
          v-show="treeTableRow.elementsSum !== 0"
          :showItem="10"
          :pageSize="20"
          :allDataSum="treeTableRow.elementsSum"
          :allpage="(Math.ceil(treeTableRow.elementsSum/20))"
          @current-change="tablePageData"
        ></Pages>
        <div class="btns text-r">
           <button type="button" class="btn btn-default" @click="close">取消</button>
          <button type="button" class="btn btn-info" @click="roleSetUserSub">保存</button>
        </div>
      </div>
    </div>

  </transition>
</template>

<script>
  import Pages from "../../sudoku/atom/pages.vue"
    export default {
        name: "RoleSetUser",
        props:["roleId","roleSetUser"],
        data(){
          return{
            isActive :-1,
            treeTableRow:{},
            stationObj:{
              pageSize:20
            },
            treeTable:{
              tHeader:[
                {"key":"isChecked","value":"是否关联"},
                {"key":"username","value":"用户名"},
                {"key":"loginName","value":"账号"},
                {"key":"pwd","value":"密码"},
                {"key":"state","value":"状态"},
                {"key":"changeTime","value":"修改时间"},
                {"key":"createTime","value":"创建时间"}
              ]
            },
            setting : {
              data: {
                simpleData: {
                  enable: true
                },
              }
            },
            nodesTree:[],
            sessingRoleId:null,
            roleImpowerArr:[] //角色已授权用户列表
          }
        },
        components:{
          Pages
        },
        watch:{
          roleSetUser:{
            handler(v1){
              if( v1.isShow ===true ){
                //console.log(v1);
                //console.log(this.roleId);
                this.sessingRoleId = this.roleId;
                this.getUserRoleAjax();
                $(function(){
                  $("#tree-roleSetUser > li").eq(0).children("a").click();
                });
              }
            },
            deep:true
          }
        },
        filters:{
          //用户状态转译
          userTranslation(value){
            let displayName = "";
            let valueObj = value[0];
            let key = value[1];
            if( key === "state" ){ //用户状态
              if( valueObj[key] === 1 ){
                displayName = "启用";
              }else if( valueObj[key] === 0 ){
                displayName = "禁用";
              }
            }else if( key === "changeTime" ||key === "createTime"){ //修改时间
              if( valueObj[key] ){
                let timeArr = valueObj[key].split(".");
                displayName = timeArr[0].replace("T"," ")
              }
            }else {
              displayName = valueObj[key]
            }
            return displayName
          }
        },
        mounted(){
          //初始化部门树
          this.treeUserAjax();
          const _this = this;
          this.setting.callback = {
            onClick: function (event, treeId, treeNode) {
              //console.log(treeNode);
              //树结构表格加载
              _this.stationObj.stationId = treeNode.id;
              _this.treeTableAjax(_this.HOST+'/user/getPoliceInfoDetail/','get',_this.stationObj)
            }
          }
        },
        //用户弹窗 部门树加载
        methods:{
          //渲染部门结构树
          treeUserAjax(){
            this.$axios.get(this.HOST+"/station/getOrgaInfo")
              .then((data)=>{
                //console.log(data);
                this.nodesTree = data.data.data;
                $.fn.zTree.init($("#tree-roleSetUser"), this.setting, this.nodesTree);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //树结构表格加载
          treeTableAjax(url,type,params){
            this.$axios[type](url,{
              params:params
            })
              .then((tableData)=>{
                //console.log(tableData.data);
                for( let i=0;i<tableData.data.data.length ;i++){ //循环便利该角色下已经关联的用户
                  if( this.roleImpowerArr.length>0 ) {
                    for( let k=0;k<this.roleImpowerArr.length;k++ ){
                      if( tableData.data.data[i].userId === this.roleImpowerArr[k] ){
                        tableData.data.data[i].isChecked = true;
                      }
                    }
                  }else{
                    tableData.data.data[i].isChecked = false;
                  }
                }
                //console.log(tableData.data.data);
                this.treeTableRow = tableData.data;

              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //获取该角色下所有的关联用户
          getUserRoleAjax(){
            this.$axios.get(this.HOST+"/roles/getRoleUsers/"+this.sessingRoleId)
              .then((data)=>{
                const roleList = data.data.privilegeUsers;
                this.roleImpowerArr = [];
                if( roleList ){
                  for( let i=0;i<roleList.length;i++ ){
                    this.roleImpowerArr.push(roleList[i].id);
                  }
                }
                ////console.log(data);
                ////console.log(this.roleImpowerArr);
              })
              .catch((err)=>{
                //console.log(err);
              })
          },
          //选择用户
          selectUser(obj){
            obj.isChecked = !obj.isChecked;
            if( obj.isChecked ){
              ////console.log("添加缓存");
              ////console.log(obj);
              this.roleImpowerArr.push(obj.userId);
            }else if( obj.isChecked === false || obj.isChecked === "false" ){
              ////console.log("删除缓存");
              ////console.log(obj);
              for( let i=0;i<this.roleImpowerArr.length;i++ ){
                if( obj.userId === this.roleImpowerArr[i] ){
                  this.roleImpowerArr.splice(i,1);
                }
              }
            }
            ////console.log(this.roleImpowerArr);
          },
          //授权保存
          roleSetUserSub(){
            this.$axios.post(this.HOST+"/roles/giveRoleUser/"+this.sessingRoleId,this.roleImpowerArr)
              .then((data)=>{
                if( data.data ){
                  this.s_alert("关联成功！");
                  // alert("关联成功！");
                  this.s_logwrite("基础信息管理-角色管理","关联了用户");
                  this.close();
                }
                //console.log(data);
              })
              .catch((err)=>{
                //console.log(err);
              });
          },
          //分页
          tablePageData(page){
            this.stationObj.pageNum = page;
            this.treeTableAjax(this.HOST+'/user/getPoliceInfoDetail/','get',this.stationObj);
            //console.log(page);
          },
          //关闭角色关联
          close(){
            this.$emit("roleSetUserClose")
          }
        }

    }
</script>

<style scoped>
  .modal-ctrl-body .modal-ctrl-main.even-row-ctrl {
    width: 1100px;
    margin-left: -550px;
  }
  .modal-ctrl-content {
    height: 300px;
    overflow: hidden;
  }
  .even-row{
    height: 100%;
    border: 1px solid rgba(51,51,51,0.08);
  }
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
